.card {
  height: 100%;
  position: relative;
  user-select: none;

  .name {
    font-size: 18px;
    color: #fff;
  }

  .tag {
    font-size: 14px;
    color: #fff;

    a {
      color: #87cefa;
      text-decoration: none;
      font-size: 18px;
      &:hover {
        text-decoration: underline;
        color: #87cefa;
      }
    }
  }

  .slide-content {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 3px;
    padding: 40px 10px 20px;
    box-sizing: border-box;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.75)
    );
    border-radius: 0 0 8px 8px;
  }

  .img {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    object-fit: cover;
  }

  .swiper-pagination {
    color: #fff;
  }
}

@media screen and (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }

  .card {
    .img {
      height: 300px;
      border-radius: '8px';
      object-fit: 'cover';
    }

    .name {
      font-size: 18px;
    }

    .tag {
      font-size: 12px;
    }

    .card.swiper-pagination {
      position: absolute;
      top: 0;
      color: #fff;
    }
  }
}
